<template>
  <div class="schedule-page">
    <!-- 顶部标题 + 按钮 -->
    <div class="header">
      <h2>今日日程</h2>
    </div>

    <!-- 日程列表 -->
    <div class="schedule-list">
      <el-card
        v-for="(item, index) in scheduleList"
        :key="index"
        class="schedule-card"
        :style="{ border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }"
      >
        <div class="card-content">
          <!-- 左侧图标 -->
          <div class="icon-box" style="background-color: #FFE6CC">
            <i class="el-icon-date" style="color: #FF994D"></i>
          </div>

          <!-- 右侧信息区 -->
          <div class="info-box">
            <div class="title">{{ item.title }}</div>
            <div class="time-location">
              <i class="el-icon-time"></i> {{ formatTimeRange(item) }}
              <i class="el-icon-location"></i> 线上
            </div>
            <div class="tag-host">
              <el-tag :type="item.color">{{ getDateType(item.datesType) }}</el-tag>
              <span class="host">{{ "主持人：" + item.nickName }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getDateByToday } from '@/api/dates/date'

export default {
  name: 'SchedulePage',
  data () {
    return {
      scheduleList: []
    }
  },
  methods: {
    getTodey(){
      getDateByToday().then(res => {
        this.scheduleList = res.data
      })
    },
    formatTimeRange(item) {
      // 如果没有 item.startTime 或 item.endTime，就返回默认值
      if (!item || !item.startTime || !item.endTime) {
        return '--:-- - --:--';
      }

      const start = item.startTime.toString().slice(11, 16);
      const end = item.endTime.toString().slice(11, 16);

      return `${start} - ${end}`;
    },
    getDateType(datesType){
      if (datesType === 0){
          return "会议"
      }else if(datesType === 1){
        return "个人"
      }else {
        return "其他"
      }
    }
  },
  created () {
    this.getTodey()
  }
}
</script>

<style lang="less" scoped>
.schedule-page {
  padding: 20px;
  background: #fff;

  // 顶部区域
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      font-size: 18px;
      font-weight: bold;
      margin: 0;
    }

    .add-btn {
      padding: 8px 16px;
    }
  }

  // 日程列表
  .schedule-list {
    .schedule-card {
      margin-bottom: 16px;

      .card-content {
        display: flex;
        align-items: center;

        // 图标容器
        .icon-box {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 12px;

          i {
            font-size: 20px;
          }
        }

        // 信息区
        .info-box {
          .title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
          }

          .time-location {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;

            i {
              margin-right: 4px;
              color: #999;
            }
          }

          .tag-host {
            display: flex;
            align-items: center;

            .el-tag {
              margin-right: 8px;
              font-size: 12px;
              padding: 4px 8px;
            }

            .host {
              font-size: 12px;
              color: #666;
            }
          }
        }
      }
    }
  }
}
</style>
